<template>
	<el-drawer :title="titleMap[mode]" v-model="visible" :size="1400" destroy-on-close @closed="$emit('closed')">
		<el-container v-loading="loading">
			<el-main style="padding:0 20px 20px 20px">
				<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
					<el-form-item label="活动分类" prop="category_id">
						<blCategory style="width: 400px;" v-model="form.category_id"
							model="Activity" />
					</el-form-item>
					<el-form-item label="活动名称" prop="title">
						<el-input v-model="form.title" style="width: 400px;"></el-input>
					</el-form-item>
					<el-form-item label="起止时间" prop="starts_at">
						<div style="width: 455px;">
							<blDatePicker v-model:starts_at="form.starts_at" v-model:ends_at="form.ends_at" />
						</div>
					</el-form-item>
					<el-form-item label="相关图片" prop="image">
						<sc-oss-upload v-model="form.image" :data="data" :apiObj="apiObj"
							accept="image/jpg,image/png,image/jpeg" :width="220">
							<div class="custom-empty">
								<el-icon><el-icon-upload /></el-icon>
								<p>活动封面 750x400</p>
							</div>
						</sc-oss-upload>
						<div style="width:15px">
							&nbsp;
						</div>
						<sc-oss-upload v-model="form.share_poster" :data="data" :apiObj="apiObj"
							accept="image/jpg,image/png,image/jpeg" :width="220">
							<div class="custom-empty">
								<el-icon><el-icon-upload /></el-icon>
								<p>分享海报 750x750</p>
							</div>
						</sc-oss-upload>
					</el-form-item>
					<el-form-item label="来源绑定" prop="referrer">
						<bl-source style="width: 400px;" v-model="form.referrer"></bl-source>
					</el-form-item>
					<el-form-item label="参加范围" prop="allowed_user_group">
						<el-select style="width: 400px;" v-model="form.allowed_user_group" filterable multiple
							clearable>
							<el-option label="宏脉新客" value="宏脉新客"></el-option>
							<el-option label="宏脉老客" value="宏脉老客"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="地域限制" prop="allowed_area">

						<el-input v-model="form.allowed_area" style="width: 400px;"></el-input>
						<!--
						<el-link href="https://lbsyun.baidu.com/jsdemo/demo/xRevAddressParseSingle.htm" target="_blank"
							rel="noopener noreferrer">
							https://lbsyun.baidu.com/
						</el-link>
						<el-link href="https://lbs.qq.com/getPoint/" target="_blank" rel="noopener noreferrer">
							位置拾取
						</el-link>

						-->
						&nbsp;
						<el-button type="primary" tag="a" href="https://lbs.qq.com/getPoint/" target="_blank"
							rel="noopener noreferrer">
							位置拾取
						</el-button>

						<!--
						https://h5gw.map.qq.com/ws/geocoder/v1/?key=%5B%E4%BD%A0%E7%9A%84key%5D&location=22.562715756588368%2C108.53113454410845&apptag=lbs_geocoder&output=jsonp&callback=jsonp_136f470077dd1b0
						-->
					</el-form-item>
					<el-form-item label="前台显示" prop="display">
						<el-radio-group v-model="form.display">
							<el-radio :label="true">是</el-radio>
							<el-radio :label="false">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="活动任务" prop="tasks">
						<sc-form-table ref="table" v-model="form.tasks" :addTemplate="addTemplate" drag-sort
							placeholder="暂无数据">

							<el-table-column prop="task_name" label="任务名称" width="150" v-if="false">
								<template #default="{ row }">
									<div @click="handleEdit(row, 'task_name')">
										<el-input v-if="row.editing && row.editingColumn === 'task_name'"
											v-model="row.task_name" size="mini" @blur="saveEdit(row)"
											@keyup.enter.native="saveEdit(row)" autofocus />
										<span v-else>{{ row.task_name || '&nbsp;' }}</span>
									</div>
								</template>
							</el-table-column>

							<el-table-column prop="task_metric_type" label="维度指标" width="90">
								<template #header>
									<span style="color: red;">*</span><span>维度指标</span>
								</template>
								<template #default="{ row }">
									<div @click="handleEdit(row, 'task_metric_type')">
										<el-select @keyup.enter.native="saveEdit(row)"
											v-if="row.editing && row.editingColumn === 'task_metric_type'"
											v-model="row.task_metric_type" placeholder="请选择" @blur="saveEdit(row)">
											<el-option label="参加活动" value="参加活动"></el-option>
											<el-option label="分享活动" value="分享活动"></el-option>
											<el-option label="会员等级" value="会员等级"></el-option>
										</el-select>
										<span v-else>{{ row.task_metric_type || '-' }}</span>
									</div>
								</template>
							</el-table-column>

							<el-table-column prop="task_metric_operator" label="判断符" width="90">
								<template #default="{ row }">
									<div @click="handleEdit(row, 'task_metric_operator')">
										<el-select @keyup.enter.native="saveEdit(row)"
											v-if="row.editing && row.editingColumn === 'task_metric_operator'"
											v-model="row.task_metric_operator" placeholder="请选择" @blur="saveEdit(row)">
											<el-option label="等于" value="等于"></el-option>
										</el-select>
										<span v-else>{{ row.task_metric_operator || '-' }}</span>
									</div>
								</template>
							</el-table-column>

							<el-table-column prop="task_metric_value" label="条件" width="90">
								<template #default="{ row }">
									<div @click="handleEdit(row, 'task_metric_value')">

										<template v-if="row.editing && row.editingColumn === 'task_metric_value'">
											<el-select @keyup.enter.native="saveEdit(row)"
												v-if="row.task_metric_type=='会员等级'" v-model="row.task_metric_value"
												placeholder="请选择" @blur="saveEdit(row)"
												:ref="`select-task_metric_value-${row.id}`" filterable>
												<el-option label="L1" value="1"></el-option>
												<el-option label="L2" value="2"></el-option>
												<el-option label="L3" value="3"></el-option>
												<el-option label="L4" value="4"></el-option>
											</el-select>

											<el-input v-else v-model="row.task_metric_value" size="mini"
												@blur="saveEdit(row)" @keyup.enter.native="saveEdit(row)" autofocus />

										</template>

										<span v-else>{{ row.task_metric_value || '-'}} </span>
									</div>
								</template>
							</el-table-column>

							<el-table-column prop="task_reward_type" label="奖励类型" width="110">
								<template #default="{ row }">
									<div @click="handleEdit(row, 'task_reward_type')">
										<el-select @keyup.enter.native="saveEdit(row)"
											v-if="row.editing && row.editingColumn === 'task_reward_type'"
											v-model="row.task_reward_type" placeholder="请选择" @blur="saveEdit(row)"
											:ref="`select-task_reward_type-${row.id}`">
											<el-option label="商品" value="商品"></el-option>
											<el-option label="卡券" value="卡券"></el-option>
											<el-option label="积分" value="积分"></el-option>
											<el-option label="抽奖" value="抽奖"></el-option>
										</el-select>
										<span v-else>{{ row.task_reward_type || '-' }}</span>
									</div>
								</template>
							</el-table-column>

							<el-table-column prop="task_reward_value" label="奖励值" width="220">
								<template #default="{ row }">
									<div @click="handleEdit(row, 'task_reward_value')">
										<sc-table-select v-model="row.task_reward_value" multiple
											:apiObj="$API.system.activityTask.rewardList" :table-width="700" clearable
											collapse-tags collapse-tags-tooltip :props="props" @blur="saveEdit(row)"
											@keyup.enter.native="saveEdit(row)" autofocus
											v-if="row.editing && row.editingColumn === 'task_reward_value' || true">
											<template #header="{form, submit}">
												<div style="display: flex;">
													<el-form :inline="true" :model="form">
														<el-form-item>
															<el-input v-model="form.keyword"></el-input>
														</el-form-item>
														<el-form-item>
															<el-button type="primary" @click="submit">查询</el-button>
														</el-form-item>
													</el-form>
													<div style="flex: 1;">
														&nbsp;
													</div>
												</div>
											</template>
											<el-table-column prop="id" label="编号" width="180"></el-table-column>
											<el-table-column prop="title" label="名称" width="220"></el-table-column>
											<el-table-column prop="type" label="类型" width="80"></el-table-column>
											<el-table-column prop="created_at" label="创建时间"></el-table-column>
										</sc-table-select>
										<span v-else>{{ row.task_reward_value?.product_title || '-' }}</span>
									</div>
								</template>
							</el-table-column>

							<el-table-column prop="task_reward_count" label="奖励次数" width="90">
								<template #default="{ row }">
									<div @click="handleEdit(row, 'task_reward_count')">
										<el-input v-if="row.editing && row.editingColumn === 'task_reward_count'"
											v-model="row.task_reward_count" size="mini" @blur="saveEdit(row)"
											@keyup.enter.native="saveEdit(row)" autofocus />
										<span v-else>{{ row.task_reward_count || '-' }}</span>
									</div>
								</template>
							</el-table-column>


							<el-table-column prop="task_reward_valid_value" label="奖励效期" width="90">
								<template #default="{ row }">
									<div @click="handleEdit(row, 'task_reward_valid_value')">
										<el-input v-if="row.editing && row.editingColumn === 'task_reward_valid_value'"
											v-model="row.task_reward_valid_value" size="mini" @blur="saveEdit(row)"
											@keyup.enter.native="saveEdit(row)" autofocus />
										<span
											v-else>{{ (row.task_reward_valid_value === null || row.task_reward_valid_value === '') ? '-' : row.task_reward_valid_value }}</span>
									</div>
								</template>
							</el-table-column>

							<el-table-column prop="task_reward_valid_unit" label="效期单位" width="90">
								<template #default="{ row }">
									<div @click="handleEdit(row, 'task_reward_valid_unit')">
										<el-select @keyup.enter.native="saveEdit(row)"
											v-if="row.editing && row.editingColumn === 'task_reward_valid_unit'"
											v-model="row.task_reward_valid_unit" placeholder="请选择" @blur="saveEdit(row)"
											:ref="`select-task_reward_valid_unit-${row.id}`">
											<el-option label="天" value="天"></el-option>
											<el-option label="月" value="月"></el-option>
											<el-option label="年" value="年"></el-option>
											<el-option label="分钟" value="分钟"></el-option>
											<el-option label="小时" value="小时"></el-option>
											<el-option label="同活动" value="同活动"></el-option>
											<el-option label="固定时间" value="固定时间"></el-option>
											<el-option label="无限期" value="无限期"></el-option>
										</el-select>
										<span v-else>{{ row.task_reward_valid_unit }}</span>
									</div>
								</template>
							</el-table-column>

							<el-table-column prop="task_reward_allow_renew" label="过期重领" width="90">
								<template #default="{ row }">
									<el-switch v-model="row.task_reward_allow_renew" inline-prompt active-text="是"
										inactive-text="否" />
								</template>
							</el-table-column>

							<el-table-column prop="task_remark" label="任务备注" min-width="90">
								<template #default="{ row }">
									<div @click="handleEdit(row, 'task_remark')">
										<el-input v-if="row.editing && row.editingColumn === 'task_remark'"
											v-model="row.task_remark" size="mini" @blur="saveEdit(row)"
											@keyup.enter.native="saveEdit(row)" autofocus />
										<span v-else>{{ row.task_remark || '&nbsp;' }}</span>
									</div>
								</template>
							</el-table-column>

						</sc-form-table>
						<el-alert
							:title="`1. 0天 0月 代表当天 和 当月底 \r\n2. 无期限 和 固定时间 不能过期重领 3. 奖励值是多选 然后奖励次数是1表示 随机奖励一个或者人工选一个`"
							type="success" style="margin-bottom:0px;"></el-alert>
					</el-form-item>

					<el-form-item :label-width="'5px'">
						<el-tabs tab-position="left" v-model="activeTab">
							<el-tab-pane label="活动详情" name="basic">
								<sc-editor v-model="form.description" placeholder="请输入" :height="400"></sc-editor>
							</el-tab-pane>
							<el-tab-pane label="活动规则" name="contact">
								<sc-editor v-model="form.explain" placeholder="请输入" :height="400"></sc-editor>
							</el-tab-pane>
						</el-tabs>
					</el-form-item>
				</el-form>
			</el-main>
			<el-footer>
				<el-button type="primary" :loading="isSaveing" @click="submit">保存</el-button>
				<el-button @click="visible=false">取消</el-button>
			</el-footer>
		</el-container>
	</el-drawer>
</template>

<script>
	var _this;

	import {
		defineAsyncComponent
	} from 'vue';
	const scEditor = defineAsyncComponent(() => import('@/components/scEditor'));

	export default {
		emits: ['success', 'closed'],
		components: {
			scEditor
		},
		data() {
			return {
				props: {
					label: 'title',
					value: 'id',
					keyword: 'keyword'
				},
				activeTab: 'basic',
				data: {

				},
				loading: false,
				mode: "add",
				titleMap: {
					add: '添加活动',
					edit: '编辑活动'
				},
				form: {
					id: '',
					title: '',
					image: '',
					allowed_area: '',
					share_poster: '',
					referrer: '',
					starts_at: '',
					ends_at: '',
					description: '',
					display: true,
					explain: '',
					allowed_user_group: '',
					tasks: [],
					category_id: null
				},
				rules: {
					title: [{
						required: true,
						message: '请填写活动名称'
					}],
					starts_at: [{
						required: true,
						message: '请选择活动起止时间'
					}]
				},
				addTemplate: {

					task_name: "",

					task_metric_type: '',
					task_metric_operator: "等于",
					task_metric_value: '',

					task_reward_type: '',
					task_reward_value: [],
					task_reward_count: 1,

					task_reward_valid_unit: "无限期",
					task_reward_valid_value: '',
					task_reward_allow_renew: 0,
					task_remark: '',
					order: '',
				},
				visible: false,
				isSaveing: false,
				apiObj: null,
			}
		},
		mounted() {
			_this = this;
		},
		methods: {
			handleEdit(row, column) {
				if (!row.editing) {
					row.editing = true;
					row.editingColumn = column;
					this.$nextTick(() => {
						const refName = `select-${column}-${row.id}`
						this.$refs[refName]?.toggleMenu()
					})
				}
			},
			saveEdit(row) {
				row.editing = false;
				row.editingColumn = null;

				if (row.task_reward_valid_value === '' || row.task_reward_valid_value === null) {
					row.task_reward_valid_value = '';
					row.task_reward_valid_unit = '无限期';
				} else if (row.task_reward_valid_value === 0 && row.task_reward_valid_unit === '无限期') {
					row.task_reward_valid_unit = '天';
				}

				console.log('保存的数据:', row);
			},


			success(res) {
				return true;
			},
			//显示
			open(data) {
				if (data) {
					this.mode = data;
				}
				this.visible = true;
				this.$nextTick(() => {
					if (this.mode == 'add') {
						//this.addTemplate.task_metric_type = 'test';
						this.$refs.table.rowAdd()
					}
				})
				return this;
			},
			//表单提交方法
			submit() {
				this.$refs.ruleForm.validate(async (data) => {
					if (data) {

						if (this.form.tasks.length > 0) {
							this.form.tasks.forEach((item, index) => {
								item.order = index;
							})
						}

						var res;
						this.isSaveing = true;
						if (this.mode == 'add') {
							res = await _this.$API.system.activity.create.post(this.form);
						} else {
							res = await _this.$API.system.activity.update.post(this.form);
						}
						this.isSaveing = false;
						if (res.code == 0) {
							this.$emit('success', data, this.mode)
							this.visible = false;
							this.$message.success("操作成功")
						} else {
							this.$alert(res.message, "提示", {
								type: 'error'
							})
						}
					}
				})
			},
			//表单注入数据
			setData(data) {
				this.loading = true

				if (!data.id) {
					if (data.category_id) {
						this.form.category_id = data.category_id
					}
					this.loading = false
					return;
				}

				const params = {
					id: data.id
				}
				setTimeout(async () => {
					var res = await this.$API.system.activity.show.get(params)
					this.loading = false
					this.form = res.data
				}, 0)
			}
		}
	}
</script>

<style>
	.custom-empty {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #8c939d;
		border-radius: 5px;
	}

	.custom-empty i {
		font-size: 30px;
		color: #fff;
	}

	.custom-empty p {
		font-size: 12px;
		font-weight: normal;
		color: #fff;
		margin-top: 10px;
	}
</style>
